<template>
  <view class="block">
    <!-- 首页商品列表 -->
    <view class="head_title">
      <text class="h2">新品上市</text>
      <view class="nickh"> Explore the trending range of Esclusiva. </view>
    </view>
    <slot>
      <view class="goods_view">
        <view class="items" v-for="item in goods" :key="item.id">
          <image class="good_img" :src="item.img" mode="aspectFill" />
          <view class="good_info">
            <text class="good_title">商品名称</text>
            <text class="good_price">￥39.9</text>
          </view>
        </view>
      </view>
    </slot>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
const props = defineProps({
  goods: {
    type: Array,
    default: () => [],
  },
});
</script>

<style lang="scss" scoped>
.block {
  margin-bottom: 30rpx;
  padding: 0 30rpx;
  .goods_view {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-content: flex-start;
    column-gap: 40rpx;
    row-gap: 24rpx;
    .items {
      // width: 180rpx;
      width: 100%;
      overflow: hidden;
      .good_info {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        overflow: hidden;
        .good_title {
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
          line-height: 1;
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: block;
          margin: 14rpx auto;
        }
        .good_price {
          font-weight: 500;
          font-size: 24rpx;
          color: #333333;
          line-height: 26rpx;
        }
      }
      .good_img {
        width: 100%;
        height: 180rpx;
      }
    }
  }
  .head_title {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 60rpx;
    .h2 {
      font-size: 28rpx;
      color: #333333;
      line-height: 33rpx;
      margin-bottom: 14rpx;
      display: inline-block;
    }
    .nickh {
      font-weight: 400;
      font-size: 20rpx;
      color: #767676;
      line-height: 23rpx;
      width: 280rpx;
    }
  }
}
</style>
